<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>鸡你太美</title>
    
</head>
<style>
    /* 定义动画规则 */

    .caixukun{
        height: 320px;
        position: absolute;
        top: 50px;
        left: 100px;
        /* 调用动画 */
        /* animation: name duration timing-function delay iteration-count direction fill-mode; */
        animation: king 0.5s infinite forwards;

    }
    @keyframes king{
        0%{transform: translateY(0) rotate(0);}
        25%{transform: translateY(-5px) translateX(5px) rotateZ(5deg) scale(1.2);}
        50%{transform: translateY(0) translateX(0px) rotate(0) scale(1);}
        75%{transform: translateY(-5px) translateX(-5px) rotateZ(-5deg) scale(1.2);}
        100%{transform: translateY(0) translateX(0px) rotate(0) scale(1);}
    }
    .box{
        width: 410px;
        margin:200px auto;
        animation: biankuang 4s infinite forwards;
    }
    .box img{
        width: 200px;
        height: 200px;

    }
    @keyframes biankuang {
        0%{background-color: border-top:1px radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(211,88,215,1) 19%, rgba(125,86,203,1) 33%, rgba(180,79,161,1) 62%, rgba(229,73,124,1) 88%, rgba(252,70,107,1) 100%)}
        25%{ background-color: border-top:1px radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(211,88,215,1) 19%, rgba(125,86,203,1) 33%, rgba(180,79,161,1) 62%, rgba(229,73,124,1) 88%, rgba(252,70,107,1) 100%)  }
        50%{ background-color: border-top:1px radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(211,88,215,1) 19%, rgba(125,86,203,1) 33%, rgba(180,79,161,1) 62%, rgba(229,73,124,1) 88%, rgba(252,70,107,1) 100%)  }
        75%{  background-color: border-top:1px radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(211,88,215,1) 19%, rgba(125,86,203,1) 33%, rgba(180,79,161,1) 62%, rgba(229,73,124,1) 88%, rgba(252,70,107,1) 100%) }
        100%{background-color: border-top:1px radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(211,88,215,1) 19%, rgba(125,86,203,1) 33%, rgba(180,79,161,1) 62%, rgba(229,73,124,1) 88%, rgba(252,70,107,1) 100%)}
    }


</style>
<body >
    
    <img class="caixukun" src="kun.png" alt="鸡你太美" title="坤坤最帅">
    
    <div class="box">
        <img src="../day04/jige.jpg" alt="">
    </div>
   
</body>
</html>



